<template>
	<div class="xitongpeizhi">
    <left></left>
    <div class="right">
      <div style="height: 91px; border-bottom: 1px solid rgb(227, 232, 241); width: 100%; padding: 0 30px;" class="flexbc">
        <el-breadcrumb separator-class="el-icon-arrow-right">
          <el-breadcrumb-item :to="{ path: '/xitongpeizhi' }">推广商城</el-breadcrumb-item>
          <el-breadcrumb-item>发布直播销售页</el-breadcrumb-item>
        </el-breadcrumb>
        <top></top>
      </div>
      <div style="padding: 37px 30px 0 30px; height: calc(100vh - 91px); overflow: auto;">
        <div class="flexbc">
          <div class="flexc">
            <el-button round >首页设置</el-button>
            <el-button round type="primary">下单成功页设置</el-button>
          </div>
          <div><el-button round type="primary" @click="fabu">确定发布</el-button></div>
        </div>
        <div class="flexc" style="font-size: 16px; font-weight: bold; margin-bottom: 20px; margin-top: 30px;">
          <div><img src="../../../static/img/bianji1.png" style="width: 22px; margin-right: 10px;"></div>
          <div>当前布局</div>
        </div>

        <div class="flex">
          <div style=" margin-right: 50px;" class="baibeijing">
              <div style="position: relative;">
                <img src="https://gperson.gantanhaokeji.top/fabu1.png" style="width: 350px;">
                <div style="position: absolute; top: 305px; left: 25px; width: 300px; text-align: center; overflow: hidden;">
                  {{form.huashu}}
                </div>
                <div style="position: absolute; top: 420px; width: 100%; left: 0;" class="flexcc">
                  <div class="flexc">
                    <div>
                      <img src="../../../static/img/loginbg.png" style="width: 100px; height: 100px; ">
                      <div style="margin: 20px 0; text-align: center; color: rgb(116, 116, 116);">说明文字</div>
                    </div>
                  </div>
                </div>
              </div>
          </div>

          <div style="width: 400px;" >
            <div class="baibeijing" style="padding: 30px;">
              <div style="text-align: center;">话术内容</div>
              <div style="margin: 20px 0;">
                <el-input v-model="form.huashu"  type="textarea" :rows="4" style="width: 100%;" ></el-input>
              </div>
              <div class="flexcc">
                <el-button round @click="log = false">取 消</el-button>
                <el-button round type="primary" @click="fabu">确 定</el-button>
              </div>
            </div>
            <div class="baibeijing" style="padding: 30px; margin-top: 30px;">
              <div style="text-align: center;">上传二维码</div>
              <div style="margin: 20px 0;" class="flexcc">
                <div><chuantu :widths="'120px'" :heights="'120px'" :widths2="'120px'" :heights2="'120px'" :bg="'rgb(246, 248, 251)'" :imgs="form.image1" @getimg="getimg" v-if="relo"></chuantu></div>
              </div>
              <div style="margin: 20px 0;">
                <el-input v-model="form.yuezu" placeholder="输入二维码说明文字" ></el-input>
              </div>
              <div class="flexcc">
                <el-button round @click="log = false">取 消</el-button>
                <el-button round type="primary" @click="fabu">确 定</el-button>
              </div>
            </div>
          </div>
		  <!-- <footers></footers> -->
        </div>
      </div>
    </div>
    <el-dialog title="如何获取敢探号秘钥" :visible.sync="ruhe_log" width="1440px" :close-on-click-modal="false" :close-on-press-escape="false">
      <div>
        <div style="color: rgb(93, 93, 93); margin-bottom: 10px;">请使用主账号登录敢探号系统，在有商家设置处找到个人版分销系统绑定，点开眼睛复制秘钥</div>
        <img src="../../../static/img/xitong6.png" style="width: 100%;">
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="ruhe_log = false">关闭</el-button>
      </span>
    </el-dialog>
	</div>
</template>

<script>
  import left from '../left.vue'
  import top from '../top.vue'
  import footers from '../footer.vue'
  import chuantu from '@/components/chuantu.vue'
	export default {
		name: 'xitongpeizhi',
    components:{
      left,chuantu,top,footers
    },
		data() {
			return {
        form:{},
        relo:true,
        xianshi:false,
        yaoqingma:"",
        apitoken:"",
        ruhe_log:false,
        biyan:true,
        xitongmiyao:"********",
        gthid:"",
        gthtoken:"",
        yibangding:false
			}
		},
		created() {
      this.getpeizhi()
      this.getyaoqingma()
      this.getgthtoken()
		},
		mounted() {

		},
		methods: {
      zhengyan:function(){
        this.xitongmiyao = this.form.apiToken
        this.biyan = false
      },
      biyan2:function(){
        this.xitongmiyao = "********"
        this.biyan = true
      },

      getimg:function(item){
        this.form.system_logo = item
      },
      getimg2:function(item){
        this.form.login_background = item
      },
      getimg3:function(item){
        this.form.qrcode = item
      },
      getimg4:function(item){
        this.form.left_logo = item
      },
      getpeizhi:function(){
        axios.get('/own/system/get').then((response)=>{
        	if (response.data.msg.code == 0) {
            this.form = response.data.data
            this.form.distributor = this.form.distributor.toString()
            this.relo = false
            this.$nextTick(()=>{
              this.relo = true
            })
        	} else {
        		this.$message.error(response.data.msg.info);
        	}
        })
      },

      getgthtoken:function(){
        // axios.get('/own/system/gthtoken/get').then((response)=>{
        // 	if (response.data.msg.code == 0) {
        //     this.gthtoken = response.data.data
        // 	} else {
        // 		this.$message.error(response.data.msg.info);
        // 	}
        // })

        axios.get('/own/sys/info').then((response)=>{
        	if (response.data.msg.code == 0) {
            if(response.data.data.gth_id){
              this.yibangding = true
            }

        	} else {
        		this.$message.error(response.data.msg.info);
        	}
        })

      },
      gengxingthtoken:function(){
        axios.post('/own/system/gth/update',{gth_id:this.gthid,gth_token:this.gthtoken}).then((response)=>{
        	if (response.data.msg.code == 0) {
            this.$message.success('绑定成功');
            this.getgthtoken()
        	} else {
        		this.$message.error(response.data.msg.info);
        	}
        })
      },
      getyaoqingma:function(){
        axios.get('/own/system/inv/get').then((response)=>{
        	if (response.data.msg.code == 0) {
            this.yaoqingma = response.data.data
        	} else {
        		this.$message.error(response.data.msg.info);
        	}
        })
      },
      gengxinyaoqingma:function(){
        axios.post('/own/system/inv/update').then((response)=>{
        	if (response.data.msg.code == 0) {
            this.getyaoqingma()
        	} else {
        		this.$message.error(response.data.msg.info);
        	}
        })
      },
      baocunpeizhi:function(){
        axios.post('/own/system/config',this.form).then((response)=>{
        	if (response.data.msg.code == 0) {
            this.$message.success('保存成功');
            this.getpeizhi()
        	} else {
        		this.$message.error(response.data.msg.info);
        	}
        })
      }
		}
	}
</script>


<style scoped lang="less">
  .xitongpeizhi{
    .xiugai{background: rgb(228, 237, 255); border-radius: 14px; height: 28px; width: 52px; color: rgb(0, 90, 255); font-size: 12px;}
    /deep/ .t .el-input__inner{ border: 0 !important; padding: 0 !important; height: 50px !important; line-height: 50px !important;}
    /deep/ .tt .el-input__inner{ border: 0 !important;  height: 50px !important; line-height: 50px !important;}
    /deep/ .el-radio{ display: block; margin-bottom: 20px;}
    .t2{
      /deep/ .el-input__inner{ border-radius: 0 !important; border: 0 !important; height: 39px !important; line-height: 39px !important;;}
    }
  }
</style>
